<template>
  <div class="container">
    <div class="header-box">
      <van-nav-bar
        title="货柜详情"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
      />
    </div>
    <div class="order-info">
      <van-form @submit="onSubmit">
        <div class="form-item" v-for="(item, index) in formItems" :key="index">
          <p>
            <span>{{ item.label }}</span>
            <span class="label-en">{{ item.enLabel }}</span>
          </p>
          <van-field
            :readonly="item.readonly"
            :disabled="item.disabled"
            v-model="counterInfo[item.name]"
            :name="item.name"
            autocomplete="off"
            @click="selectInput(item.name)"
          />
        </div>
        <!--        <div class="print-btn">-->
        <!--          <van-button type="info" size="large" native-type="submit"-->
        <!--            >更新货柜</van-button-->
        <!--          >-->
        <!--        </div>-->
      </van-form>
      <van-divider
        :style="{
          color: '#1989fa',
          borderColor: '#1989fa',
          padding: '0 16px',
          fontSize: '16px',
        }"
      >
        货物列表
      </van-divider>
      <div class="order-cargo">
        <div
          class="order-cargo-item"
          v-for="(item, index) in counterInfo.cargoList"
          :key="index"
        >
          <div class="form-item">
            <p>
              <span>客户姓名</span>
              <span class="label-en">Customer's name</span>
            </p>
            <van-field :readonly="true" v-model="item.customerName" />
          </div>
          <div class="form-item">
            <p>
              <span>客户代码</span>
              <span class="label-en">Customer's code</span>
            </p>
            <van-field :readonly="true" v-model="item.customerName" />
          </div>
          <div class="form-item">
            <p>
              <span>客户电话</span>
              <span class="label-en">Customer's phone</span>
            </p>
            <van-field :readonly="true" v-model="item.customerName" />
          </div>
          <div class="form-item">
            <p>
              <span>货物名称</span>
              <span class="label-en">Cargo</span>
            </p>
            <van-field :readonly="true" v-model="item.customerName" />
          </div>
          <div class="form-item">
            <p>
              <span>货物数量</span>
              <span class="label-en">Total</span>
            </p>
            <van-field :readonly="true" v-model="item.customerName" />
          </div>
          <div class="form-item">
            <p>
              <span>包装数量</span>
              <span class="label-en">packages</span>
            </p>
            <van-field :readonly="true" v-model="item.customerName" />
          </div>
          <div class="form-item">
            <p>
              <span>货物体积</span>
              <span class="label-en">Volume</span>
            </p>
            <van-field :readonly="true" v-model="item.customerName" />
          </div>
        </div>
      </div>
      <!-- 日期选择器 -->
      <van-popup v-model="dateShow" position="bottom">
        <van-datetime-picker
          @confirm="selectDataVal"
          @cancel="dateShow = false"
          v-model="currentDate"
          type="datetime"
          title="选择年月日"
        />
      </van-popup>
      <!-- 页面加载 -->
      <div class="page-loading" v-if="pageLoading">
        <van-loading color="#1989fa" text-color="#1989fa" vertical>
          加载中...
        </van-loading>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { List, Search, Dialog, Toast } from "vant";
import { counterEditInfo } from "@/api/manager";
import tools from "@/utils/tools";
@Component({
  components: {
    List,
    Search,
    Dialog,
  },
})
export default class ManagerIndex extends Vue {
  // 订单id
  private counterId: any = this.$route.query.id;
  // 页面加载
  private pageLoading = false;
  // 日期显示
  private dateShow = false;
  private currentDate: any = null;
  // 订单详情表单
  private formItems: any = [
    {
      name: "code",
      label: "货柜编码",
      enLabel: "container code",
      readonly: true,
      disabled: false,
    },
    {
      name: "lockCode",
      label: "锁头编码",
      enLabel: "container lockhead code",
      readonly: true,
      disabled: false,
    },
    {
      name: "master",
      label: "货柜主人",
      enLabel: "container owner",
      readonly: true,
      disabled: false,
    },
    {
      name: "masterPhone",
      label: "联系电话",
      enLabel: "container owner's phone number",
      readonly: true,
      disabled: false,
    },
    {
      name: "totalPackage",
      label: "包装总数",
      enLabel: "total package",
      readonly: true,
      disabled: false,
    },
    {
      name: "totalNum",
      label: "货物总数量",
      enLabel: "total cargo",
      readonly: true,
      disabled: false,
    },
    {
      name: "cargoVolume",
      label: "总计平方",
      enLabel: "total volume",
      readonly: true,
      disabled: false,
    },
    {
      name: "loadingTime",
      label: "装货日期",
      enLabel: "loading date",
      readonly: true,
      disabled: false,
    },
    {
      name: "loadingTime",
      label: "到港日期",
      enLabel: "arrival date",
      readonly: true,
      disabled: false,
    },
  ];
  // 订单详情
  private counterInfo: any = {
    id: null,
    code: null,
    lockCode: null,
    companyId: null,
    company: {},
    master: null,
    masterPhone: null,
    cargoVolume: null,
    loadingTime: null,
    arrivalTime: null,
    cargoList: [],
  };
  // 日期选择器
  private selectInput(name: any) {
    if (name == "warehousingTime") {
      console.log("选择日期");
    }
  }
  private selectDataVal(val: any): void {
    // this.orderInfo.warehousingTime = tools.formatDate(val, "yyyy-MM-dd HH:mm");
    this.dateShow = false;
  }
  // 生命钩子
  private async created(): Promise<void> {
    try {
      this.pageLoading = true;
      await this.getOrderInfo();
      this.pageLoading = false;
    } catch (e) {
      this.pageLoading = false;
    }
  }
  // 获取订单详情
  private async getOrderInfo(): Promise<void> {
    this.counterInfo = (await counterEditInfo(this.counterId)).data;
  }
  // 提交修改
  private onSubmit(): void {
    Dialog.alert({
      message: "是否更新货柜",
      showCancelButton: true,
    }).then(async () => {
      console.log("123");
    });
  }
  // 返回
  private onClickLeft(): void {
    this.$router.go(-1);
  }
}
</script>
<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100%;
  overflow-y: hidden;
  .header-box {
    width: 100%;
    position: fixed;
    top: 0;
    z-index: 99;
  }
  .order-info {
    width: 100%;
    margin-top: 46px;
    overflow-y: auto;
    height: calc(100% / 1 - 46px);
    box-sizing: border-box;
    //padding-bottom: 50px;
    .form-item {
      padding-top: 5px;
      border-bottom: 1px #f5f5f5 solid;
      p {
        margin-left: 16px;
        font-size: 18px;
        line-height: 22px;
        span {
          display: block;
        }
        .label-en {
          font-weight: 600;
          font-size: 15px;
        }
      }
      ::v-deep .van-field__control {
        font-size: 16px !important;
      }
    }
    .van-cell {
      font-size: 18px;
    }
    .order-cargo {
      width: 100%;
      box-sizing: border-box;
      padding: 0 10px 0 10px;
      .order-cargo-item {
        width: 100%;
        border: 1px #dcdcdc solid;
        border-radius: 5px;
        overflow: hidden;
        margin-bottom: 15px;
      }
    }
  }
  .print-btn {
    width: 100%;
    height: 50px;
    bottom: 0;
    position: absolute;
    .van-button {
      border-radius: 0 !important;
    }
  }
  .page-loading {
    position: fixed;
    top: 0;
    z-index: 99;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.3);
  }
}
</style>
